<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 使用bootstrap，需要引入样式文件 -->
  <link rel="stylesheet" href="lib/boostrap/css/bootstrap.css">
  <style>
    .navbar {
      border-radius: 0px;
    }

    .table td,
    .table th {
      text-align: center;
      vertical-align: middle !important;
    }

    .mask {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      /* background: url('./images/1.gif') no-repeat center center; */
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
      display: none;
    }

    @keyframes rotate {
      from {
        transform: translate(-50%, -50%) rotate(0deg);
      }

      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .mask .rotate {
      border: 3px solid blue;
      width: 100px;
      height: 100px;
      animation: rotate 1s infinite;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>

<body>
  <!-- 导航条 -->
  <nav class="navbar navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">英雄管理系统</a>
      </div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Copyright © 2020</a></li>
      </ul>
    </div>
    </div>
  </nav>


  <!-- 面板 -->
  <div class="container">
    <div class="panel panel-success">
      <div class="panel-heading clearfix">
        <h4 class="pull-left">英雄基本信息管理</h4>
        <button class="btn btn-primary pull-right btn-add">添加英雄信息</button>
      </div>
      <div class="panel-body">
        <table class="table table-striped table-bordered">
          <thead>
            <tr>
              <th>序号</th>
              <th>姓名</th>
              <th>性别</th>
              <th>所在地址</th>
              <th>个人简介</th>
              <th>录入时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <!-- <tr>
              <td>1</td>
              <td>张三</td>
              <td>男</td>
              <td>德玛西亚</td>
              <td>随便</td>
              <td>2019-11-30 17:30:02</td>
              <td>
                <button class="btn btn-success">修改</button>
                <button class="btn btn-danger">删除</button>
              </td>
            </tr> -->

          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="mask">
    <div class="rotate"></div>
  </div>

  <!-- 删除学生时弹出的模态框 -->
  <div class="modal fade delModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">删除英雄</h4>
        </div>
        <div class="modal-body">
          <p class="text-danger">你确定要删除该英雄吗?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary btn-sure-delete">确定</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <!-- 添加英雄或更新英雄时弹出来的模态框 -->
  <div class="modal fade addModal" id="addModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-md" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title add-modal-title">添加英雄信息</h4>
        </div>
        <div class="modal-body">
          <form id="myForm">
            <div class="form-group">
              <input type="text" class="form-control" name="name" placeholder="请输入英雄的姓名">
            </div>
            <div class="form-group">
              <select class="form-control" name="sex">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
            <div class="form-group">
              <input type="text" class="form-control" name="address" placeholder="请输入所在地区">
            </div>
            <div class="form-group">
              <textarea class="form-control" rows="3" name="introduce" placeholder="请输入个人介绍"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary btn-sure-edit">确定</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  <script type="text/taa" id="heroTmp">
    {{each list value index}}
    <tr>
      <td>{{index+1}}</td>
      <td>{{value.name}}</td>
      <td>{{value.sex}}</td>
      <td>{{value.address}}</td>
      <td>{{value.introduce}}</td>
      <td>{{value.createTime}}</td>
      <td>
        <button class="btn btn-success" onclick="modify({{value}})">修改</button>
        <button class="btn btn-danger" onclick="del({{value}})">删除</button>
      </td>
    </tr>
    {{/each}}
  </script>

  <script src="./lib/art-template/template-web.js"></script>
  <script src="./lib/jquery/jquery-1.12.4.js"></script>
  <script src="./lib/boostrap/js/bootstrap.js"></script>
  <script src="./lib/js/index.js"></script>
</body>

</html>